<template>
  <view class="followWxAccountDialog">
    <u-popup
      :show="show"
      mode="bottom"
      :round="12"
      @close="close"
      :closeOnClickOverlay="true"
      :closeable="false"
      :safeAreaInsetBottom="false"
    >
      <view class="popCenter">
        <image
          class="popCenter-bgImg"
          src="@/static/images/home/follow_wx_accont_bg.png"
        ></image>
        <view class="content">
          <image
            class="content-close"
            src="@/pagesA/static/images/chat/ai_close.png"
            @tap="close"
          ></image>
          <view class="content-title">长按识别关注【库课云】公众号</view>
          <view class="content-subTitle">还可微信搜索【库课云】关注</view>

          <view class="content-qrCodeBg">
            <image
              class="content-qrCodeBg-img"
              :src="getQrCodeUrl()"
              :show-menu-by-longpress="true"
            >
            </image>
            <view class="content-qrCodeBg-logoBg">
              <image
                class="content-qrCodeBg-logoBg-logo"
                src="@/static/images/common/logo.png"
              >
              </image>
            </view>
          </view>

          <view class="content-bottomTitle2">关注公众号，可以享受以下权益</view>
          <view class="content-bottomTitle1">实时接收服务消息，方便快捷</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
import { getQrCodeUrl } from "@/utils/storageUtil";
defineProps({
  show: {
    type: Boolean,
    default: true,
  },
});
// 按钮关闭
const close = () => {
  uni.showTabBar();
  emit("close");
};

const emit = defineEmits(["close"]);
</script>

<style lang="scss" scoped>
.followWxAccountDialog {
  .popCenter {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    height: 1080rpx;
    &-bgImg {
      width: 100vw;
      height: 1080rpx;
    }
    .content {
      position: absolute;
      width: 100vw;
      height: 1080rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      &-title {
        text-align: center;
        padding-top: 42rpx;
        font-weight: 500;
        font-size: 40rpx;
        color: #091140;
        line-height: 40rpx;
      }
      &-subTitle {
        padding-top: 40rpx;
        font-size: 32rpx;
        color: #091140;
        line-height: 32rpx;
        text-align: center;
      }
      &-close {
        top: 42rpx;
        position: absolute;
        right: 24rpx;
        width: 44rpx;
        height: 44rpx;
      }
      &-qrCodeBg {
        position: relative;
        margin-top: 126rpx;
        width: 466rpx;
        height: 466rpx;
        &-img {
          width: 466rpx;
          height: 466rpx;
        }
        &-logoBg {
          position: absolute;
          top: calc(172rpx);
          left: calc(172rpx);
          width: 120rpx;
          height: 120rpx;
          background: #ffffff;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          border: 1rpx solid #b0b0b0;
          &-logo {
            margin-top: 18rpx;
            width: 110rpx;
            height: 81rpx;
          }
        }
      }
      &-bottomTitle2 {
        margin-top: auto;
        font-size: 32rpx;
        color: #091140;
        line-height: 32rpx;
      }
      &-bottomTitle1 {
        padding-top: 32rpx;
        font-size: 28rpx;
        color: #666666;
        line-height: 32rpx;
        margin-bottom: 128rpx;
      }
    }

    .closeIcon {
      position: absolute;
      right: 24rpx;
      width: 44rpx;
      height: 44rpx;
    }
  }
}
</style>
